

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>供应商</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">   
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <!--高级查询模块-->
          <form class="layui-form layui-from-pane" action="" method="post">
            <div class="layui-card-body">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">供应商名称:</label>
                  <div class="layui-input-inline">
                    <input type="text" id = "supplierName" name="name" placeholder="请输入需要查询的供应商名称"
                           class="layui-input">
                  </div>
                </div>
                <button class="layui-btn" lay-submit lay-filter="queryForm"
                        style="margin-left: 120px">立即查询
                </button>
              </div>
              <table id="demo" lay-filter="test"></table>
            </div>
          </form>
          <!--查询模块结束-->
        </div>
      </div>

     <!-- <div style="padding-bottom: 12px;">
          <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
          <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
      </div>-->
        <!--表格-->
      <table id="supplier-list" lay-filter="supplier-list"></table>

      <script type="text/html" id="table-useradmin-webuser">
        {{#  if(d.role == '超级管理员'){ }}
        <!--            <a class="layui-btn layui-btn-disabled layui-btn-xs">重置密码</a>-->
        <a class="layui-btn layui-btn-disabled layui-btn-xs">编辑</a>
        <a class="layui-btn layui-btn-disabled layui-btn-xs">删除</a>
        {{#  } else { }}
        <!--            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="pwd">重置密码</a>-->
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        {{#  } }}
      </script>
    </div>
  </div>
  <!--隐藏模块-->
  <div class="layui-row" id="popUpdateEmp" style="display:none;">
    <div class="layui-col-md10">
      <form class="layui-form" action="" style="margin-top:20px">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">供应商名称</label>
            <div class="layui-input-inline">
              <input type="text" id="name" readonly name="name" lay-verify="required"
                     autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
              <input type="text" id="phone" name="phone" lay-verify="required" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
              <input type="text" id="email" name="email" lay-verify="required" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
              <input type="text" id="address" name="address" lay-verify="required" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">供应商类型</label>
            <div class="layui-input-inline">
              <input id="type" type="text" name="type" lay-verify="required"  autocomplete="off"
                     class="layui-input">
            </div>
          </div>

        </div>
        <button class="layui-btn" lay-submit lay-filter="updateType"
                style="margin-left: 120px">确认修改
        </button>
      </form>
    </div>
  </div>
 <script src="/layuiadmin/layui/layui.js"></script>
  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
      <button class="layui-btn layui-btn-sm" lay-event="import">导入</button>
      <!--        <button class="layui-btn layui-btn-sm" lay-event="isAll">导出</button>-->
    </div>
  </script>
  <script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;

    //供应商管理
    table.render({
      elem: '#supplier-list'
      , url: '/supplier/findData.do'//商品接口
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'}
          , {field: 'id', width: 100, title: 'ID', width: 80, sort: true}
          , {field: 'name', title: '供应商名称', width: 100}
          , {field: 'phone', title: '供应商电话', width: 120}
          , {field: 'email', title: '供应商邮箱', width: 100}
          , {field: 'address', title: '供应商地址',}
          , {field: 'type', title: '供应商类型', width: 120}
          , {title: '操作', width: 210, align: 'center', fixed: 'right', toolbar: '#table-useradmin-webuser'}
        ]
      ], page: true
      , limit: 10
      , height: 'full-220'
      , id: 'testReload'
      , text: '对不起，加载出现异常！'
    });
    //头工具栏事件
    table.on('toolbar(supplier-list)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          var data = checkStatus.data;

          break;
        case 'import':
          var data = checkStatus.data;
          layer.msg('导入：'+ data.length + '个');
          break;
      };
    });
    //监听行工具事件
    table.on('tool(supplier-list)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('真的删除吗！', function (index) {

          //异步像服务器发送删除请求
          $.ajax({
            url: '/supplier/del.do',
            type: 'GET',
            data: {'id': data.id},
            success: function (result) {
              if (result.success == true) {
                layer.msg("删除成功!" + result, {icon: 6});
                obj.del();
                layer.close(index);

              } else {
                layer.msg("删除失败!" + result, {icon: 5});
                layer.close(index);
              }
            },
            error: function (errorMsg) {
              layer.msg("数据异常!" + errorMsg, {icon: 5});
              layer.close(index);
              location.reload();
            },
          });
        });
        //更新用户
      } else if (obj.event == 'edit') {
        layer.open({
          type: 1,
          title: "更新用户",
          area: ['480px', '510px'],
          content: $("#popUpdateEmp"),
          success: function () {
            //回显数据
            $("#id").val(data.id);/**/
            $("#name").val(data.name);
            $("#email").val(data.email);
            $("#address").val(data.address);
            $("#phone").val(data.phone);
            $("#type").val(data.type);
          },
        });
      }
    });
    //更新操作
    form.on('submit(updateType)', function (data) {
      console.log(data);
      //发送ajax请求
      $.ajax({
        url: '/supplier/update.do',
        data: JSON.stringify(data.field),
        type: 'POST',
        contentType: 'application/json',  //数据类型格式
        success: function (result) {
          if (result.success == true) {
            layer.closeAll();
            layer.msg('更新成功', {time: 1 * 1000}, function () {
              location.reload();
            });
          } else {
            layer.closeAll();
            layer.msg('更新失败', {time: 1 * 1000}, function () {
              location.reload();
            });
          }
        },
        error: function (errorMsg) {
          alert("数据异常！" + errorMsg);
          location.reload();
        },
      });
      return false;
    });
    //监听搜索
    form.on('submit(queryForm)', function(data){
      var field = data.field;
      //执行重载
      //执行重载(这里reload后面的ID是render后面的ID)
      table.reload('testReload', {
        where: {
          name: $("#supplierName").val()
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    });
    //高级查询操作
    /*form.on('submit(queryForm)', function (data) {
      table.render({
        elem: '#supplier-list'
        , url: '/supplier/findData.do?page=1&limit=10&name=' + data.field.name //商品接口
        , cols: [
            [
              {type: 'checkbox', fixed: 'left'}
              , {field: 'id', width: 100, title: 'ID', width: 80, sort: true}
              , {field: 'name', title: '供应商名称', width: 80}
              , {field: 'email', title: '供应商邮箱', width: 100}
              , {field: 'address', title: '供应商地址',}
              , {field: 'phone', title: '供应商电话', width: 120}
              , {field: 'type', title: '供应商类型', width: 120}
              , {title: '操作', width: 210, align: 'center', fixed: 'right', toolbar: '#table-useradmin-webuser'}
            ]
        ]
        , page: true
        , limit: 10
        , height: 'full-220'
        , text: '对不起，加载出现异常！'
      });
      return false;
    });*/

  });
  </script>
</body>
</html>

